<template>
  <div class="container">
    <el-form label-width="80px" :inline="false" v-if="proj">
      <el-form-item label="工程名称">
        <el-input v-model="proj.name"></el-input>
      </el-form-item>
      <el-form-item label="工程简称">
        <el-input v-model="proj.shortName"></el-input>
      </el-form-item>
      <el-form-item label="分公司">
        <el-select v-model="proj.company" placeholder="请输入分公司" clearable>
          <el-option v-for="item in options_company" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="电压等级">
        <el-select v-model="proj.dianya" placeholder="请输入电压等级" clearable>
          <el-option v-for="item in options_dianya" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">修改</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import useProj from '@renderer/composables/useProj'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'

const { find, update, proj } = useProj()
const route = useRoute()
const router = useRouter()

const options_company = [
  { id: 1, label: '线一', value: '线一' },
  { id: 2, label: '线二', value: '线二' },
  { id: 3, label: '天心', value: '天心' },
]

const options_dianya = [
  { id: 1, label: '220kV', value: '220kV' },
  { id: 2, label: '330kV', value: '330kV' },
  { id: 3, label: '500kV', value: '500kV' },
  { id: 4, label: '750kV', value: '750kV' },
  { id: 5, label: '±800kV', value: '±800kV' },
  { id: 6, label: '1000kV', value: '1000kV' },
]
find(+route.params.id)
const onSubmit = async () => {
  await update(+route.params.id, {
    name: proj.value?.name,
    shortName: proj.value?.shortName,
    company: proj.value?.company,
    dianya: proj.value?.dianya,
  })
  ElMessage({
    type: 'success',
    message: '修改成功',
  })
  router.push({ name: 'proj.list' })
}

const cancel = () => {
  router.push({ name: 'proj.list' })
}
</script>

<style lang="scss" scoped>
.container {
  @apply px-5;
}
</style>
